import { useState } from 'react'
import { observer } from 'mobx-react'
import { useStore } from '@renderer/store'
import { useNavigate } from 'react-router-dom'
import { Form, Image, Input, Message, Modal, Dropdown, Menu, Trigger, Tooltip, Skeleton } from '@arco-design/web-react'
import { IconCopy, IconDelete, IconEdit, IconHistory, IconMore, IconStar } from '@arco-design/web-react/icon'

const FormItem = Form.Item
const coverImage = "https://static.vecteezy.com/system/resources/previews/008/111/201/non_2x/filling-ballot-paper-line-icon-free-vector.jpg"

function NoteCard(props) {
  const { data } = props
  const { noteStore } = useStore()

  const navigate = useNavigate()

  const [visible, setVisible] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)
  const [form] = Form.useForm()

  function onOk() {
    form.validate().then((res) => {
      setConfirmLoading(true)
      console.log(res)
      noteStore.saveNote({
          ...data,
          title: res.title
      }).then(noteId => {
          // navigate(`/note?id=${noteId}`, { replace: true })
          Message.success('Success !')
          setVisible(false)
          setConfirmLoading(false)
      })
      // setTimeout(() => {
      //   Message.success('Success !');
      //   setVisible(false);
      //   setConfirmLoading(false);
      // }, 1500);
    })
  }

  const handleGoNote = () => {
    console.log(`/note?id=${data.id}`)
    navigate(`/note?id=${data.id}`, { replace: true })
  }

  const handleRename = (item) => {
    setVisible(true)
    form.setFieldsValue({
      title: item.title,
    });
    // console.log(item)
    // navigate('/note', { replace: true })
  }

  const handleBookmark = (item) => {
    console.log(item)
    noteStore.changeBookmark(item.id, item.isBookmark === 1 ? 0 : 1).then(res => {
      Message.success('success')
    })
  }

  const handleCopy = (item) => {
    let noteItem = {
      ...item,
      title: item.title + ' (copy)'
    }
    delete noteItem.id
    noteStore.saveNote(noteItem).then(noteId => {
      Message.success('success')
      // navigate(`/note?id=${noteId}`, { replace: true })
    })
    console.log(noteItem)
  }

  const handleRemove = (item) => {
    noteStore.removeToTrash(item.id).then(res => {
      Message.success('success')
    })
  }

  const handleRestore = (item) => {
    noteStore.restoreNote(item.id).then(res => {
      Message.success('success')
    })
  }

  const handleDelete = (item) => {
    noteStore.delNote(item.id).then(res => {
      Message.success('success')
    })
  }

  const dropList = (
    <Menu>
      <Menu.Item key="1" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleRename(data)
      }}><IconEdit /><span >Rename</span></Menu.Item>
      <Menu.Item key="2" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleBookmark(data)
      }}><IconStar /><span
      >
        {data.isBookmark === 1 ? 'Remove' : 'Add to'} favorites</span>
      </Menu.Item>
      <Menu.Item key="3" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleCopy(data)
      }}><IconCopy /><span >Make a copy</span></Menu.Item>
      <Menu.Item key="4" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleRemove(data)
      }}><IconDelete /><span >Delete</span></Menu.Item>
    </Menu>
  )

  const delList = (
    <Menu>
      <Menu.Item key="5" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleRestore(data)
      }}><IconHistory /><span
        >Restore</span></Menu.Item>
      <Menu.Item key="6" onClick={(e) => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        handleDelete(data)
      }}><IconDelete /><span >Permanently Delete</span></Menu.Item>
    </Menu>
  )

  const formItemLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 20
    }
  }


  const [visiblePopup, setVisiblePopup] = useState(false)
  const Popup = () => {
    return (
      <div className='popup-menu' style={{ width: data.isDelete === 1 ? 200 : 180 }}>
        {data.isDelete === 1 ? delList : dropList}
      </div>
    );
  }


  return <>
    <div className="note-card" >
      <span className="cover" onClick={handleGoNote}>
        <Trigger popupVisible={visiblePopup} onClickOutside={() => {
          setVisiblePopup(false);
        }} popup={() => <Popup />} trigger='click' position='rt' classNames='zoomInTop'>
          <span className="more-action" onClick={(e) => {
            e.stopPropagation();
            e.nativeEvent.stopImmediatePropagation();
            setVisiblePopup(!visiblePopup);
          }}><IconMore fontSize={24} /></span>
        </Trigger>

        {/*<Dropdown droplist={data.isDelete === 1 ? delList : dropList} position="bl">*/}
        {/*  */}
        {/*</Dropdown>*/}
      </span>
      <div className="note-image" onClick={handleGoNote}>
      <Image
          width={200}
          height={250}
          preview={false}
          src={data.image || coverImage}
          alt="Notes"
        />
      </div>
      <div className="title" onClick={handleGoNote}>{data.title || ''}</div>
    </div>

    <Modal
      title="重命名"
      visible={visible}
      onOk={onOk}
      confirmLoading={confirmLoading}
      onCancel={() => setVisible(false)}
    >
      <Form
        {...formItemLayout}
        form={form}
        labelCol={{
          style: { flexBasis: 90 }
        }}
        wrapperCol={{
          style: { flexBasis: 'calc(100% - 90px)' }
        }}
      >
        <FormItem label="Title" field="title" rules={[{ required: true }]}>
          <Input placeholder="Input note title" />
        </FormItem>
      </Form>
    </Modal>
  </>
}

export default observer(NoteCard)
